<style>
/*清风相关分类*/
#qf-related-sorts .bd {width:100%;overflow:hidden}
#qf-related-sorts .bd .note {padding:15px;color:#999}
/*方案一，只显示同级分类*/
.cat-style1 {overflow:hidden}
.cat-style1 ul{display:none;}
.cat-style1 li {float:left;padding:3px 6px 3px 0;width:95px;height:18px;line-height:18px;overflow:hidden;}
/*方案二，递归父类的子类,手风琴效果*/
.cat-style2 {overflow:hidden;*zoom: 1}
.cat-style2:after {content:"\0020";display: block;visibility:hidden;clear:both;height:0;overflow:hidden;}
.ex-handle,.ex-contract {width:100%;float:let;}
.ex-handle {padding:2px 0}
.ex-handle h3,.ex-contract .lv3  {padding-left:18px;}
.ex-handle h3 {position:relative;height:22px;line-height:22px;}
.ex-handle i.icon {width:12px;height:12px;position:absolute;left:12px;top:16px;display:block;overflow:hidden;text-indent:-99em;background:url("images/accordion.gif") no-repeat 0 center;}
.ex-handle.active i.icon {background-position:right center;}
.ex-contract {line-height:0;}
.ex-contract .lv3 {padding-bottom:5px;line-height:normal}
.ex-contract .lv3 li {float:left;height:18px;line-height:18px;width:85px;padding:3px 6px 0 0}
.cat-style1 .curr a,.cat-style2 .curr a {color:#f60}
</style>
<{if $data.cat}>
<{if $setting.master == 1}>
<{foreach from=$data.cat item=lv1 key=key}>
<div class="qf-ec-box" id="qf-related-sorts">
	<div class="hd"><h3><{if $setting.title}><{$setting.title}><{else}><a title="<{$lv1.catName}>" href="<{$lv1.catLink}>"><{$lv1.catName}></a><{/if}></h3></div>	
	<div class="bd">
		<{if count($lv1.items) >0}>
		<ul class="cat-style1">
		<{foreach from=$lv1.items item=lv2 key=key}>
		<{assign var="co" value=$do+1}>
		<li class="fore<{$co}> lv2<{if $lv2.catId == $data.curr1 || $lv2.catId == $data.curr2}> curr<{/if}>">
		<a title="<{$lv2.catName}>" href="<{$lv2.catLink}>"><{$lv2.catName}></a>
		</li><{/foreach}>
		</ul>
		<{else}>
			<div class="note">暂无相关分类！</div>
		<{/if}>
	</div>
</div>
<{/foreach}>
<{else}>
<{foreach from=$data.cat item=lv1 key=key}>
<div class="qf-ec-box" id="qf-related-sorts">
	<div class="hd"><h3><{if $setting.title}><{$setting.title}><{else}><a title="<{$lv1.catName}>" href="<{$lv1.catLink}>"><{$lv1.catName}></a><{/if}></h3></div>	
	<div class="bd">
		<{if count($lv1.items) >0}>
		<{assign var="do" value=0}>
		<{foreach from=$lv1.items item=item key=key}>
		<{if $item.catId == $data.curr1 || $item.catId == $data.curr2}><{assign var="Index" value=$do}><{/if}>		
		<{assign var="do" value=$do+1}>
		<{/foreach}>	
		<div class="cat-style2 auto-bind-widget" data-widget-type="Accordion" data-widget-config="{triggers:'.ex-handle',panels:'.ex-contract',eventType:'click',activeIndex:<{$Index}>}">
			<{foreach from=$lv1.items item=lv2 key=key}>
			<{assign var="so" value=$so+1}>
			 <div class="fore<{$so}> ex-handle<{if $lv2.catId == $data.curr1 || $lv2.catId == $data.curr2}> active<{/if}>"><h3><i class="icon">&#x2c;</i><a title="<{$lv2.catName}>" href="<{$lv2.catLink}>"><{$lv2.catName}></a></h3></div>
			 <div class="ex-contract" style="<{if $lv2.catId == $data.curr1 || $lv2.catId == $data.curr2}>display:block<{else}>display:none<{/if}>">
			 <{if $lv2.items}>
				<ul class="lv3 clearfix">
				<{foreach from=$lv2.items item=lv3 key=key}>
				<li<{if $lv3.catId == $data.curr1}> class="curr"<{/if}>><a title="<{$lv3.catName}>" href="<{$lv3.catLink}>"><{$lv3.catName}></a></li>
				<{/foreach}>
				</ul>
			 <{/if}>
			</div>
			<{/foreach}>
		</div>
		<{else}>
			<div class="note">暂无相关分类！</div>
		<{/if}>
	</div>
</div>
<{/foreach}>
<{/if}>
<{/if}>